<template>
    <div class="koi-flex">
        <KoiCard>

            <div class="header">

                <div class="title">

                    <div>
                        功能配置-<span style="color: #909399;">最后更新时间：{{ detailData.updateTime }}</span>-{{ gl_vesion }}
                    </div>

                    <div>
                        <el-tooltip content="刷新" placement="top">
                            <el-button circle icon="refresh" @click="handleRefresh()" />
                        </el-tooltip>

                        <el-tooltip content="修改" placement="top">
                            <el-button circle icon="Edit" @click="handleEdit()" />
                        </el-tooltip>
                    </div>

                </div>
            </div>

            <el-form label-position="top" label-width="100px" :model="detailData"
                style="display: flex; justify-content: space-between">
                <div class="list-w">
                    <el-form-item label="是否校验短信验证码" prop="CheckSMSCode">
                        <el-switch v-model="detailData.CheckSMSCode" />
                    </el-form-item>

                    <el-form-item label="是否校验密码强度" prop="CheckPasswordStrength">
                        <el-switch v-model="detailData.CheckPasswordStrength" />
                    </el-form-item>
                    <el-form-item label="token持续时长,单位秒">
                        <el-input v-model="detailData.TokenDuration" />
                    </el-form-item>

                    <el-form-item label="是否启动单一设备登录" prop="SingleDeviceLogin">
                        <el-switch v-model="detailData.SingleDeviceLogin" />
                    </el-form-item>
                    <el-form-item label="是否开启通过query传递token的功能 header中未检测到token 将使用query中的token" prop="TokenQuery">
                        <el-switch v-model="detailData.TokenQuery" />
                    </el-form-item>

                    <el-form-item label="注册后是否自动登录" prop="RegisterAutoLogin">
                        <el-switch v-model="detailData.RegisterAutoLogin" />
                    </el-form-item>
                    <el-form-item label="密码登录时是否校验验证码 默认true 一直校验" prop="CheckImgCode">
                        <el-switch v-model="detailData.CheckImgCode" />
                    </el-form-item>
                </div>

                <div class="list-w">
                    <el-form-item label="系统请求已注册服务的swagger的超时时间,单位毫秒">
                        <el-input v-model="detailData.ServiceSwaggertimeout" />
                    </el-form-item>
                    <el-form-item label="系统请求已注册服务的接口超时时间,单位毫秒">
                        <el-input v-model="detailData.ServiceWaitingTimeout" />
                    </el-form-item>

                    <el-form-item label="掉线时间 单位分钟,在注册的服务掉线多长时间后开始进行提醒或关闭">
                        <el-input v-model="detailData.DownTime" />
                    </el-form-item>
                    <el-form-item label="是否开启服务监控通知,开启后会在掉线一定时长后进行钉钉通知提醒" prop="DownMonitor">
                        <el-switch v-model="detailData.DownMonitor" />
                    </el-form-item>
                    <el-form-item label="钉钉通知地址">
                        <el-input v-model="detailData.dingWebhook" />
                    </el-form-item>
                    <el-form-item label="达到DownTime时间后 停止异常服务的启用状态,不推荐生产模式下开启" prop="DownStopEnabledServer">
                        <el-switch v-model="detailData.DownStopEnabledServer" />
                    </el-form-item>
                </div>

                <div class="list-w">
                    <el-form-item label="登录时开启扫码验证,通过微信扫码打开小程序进行登录验证" prop="OpenLoginScanVerifyForWeChat">
                        <el-switch v-model="detailData.OpenLoginScanVerifyForWeChat" />
                    </el-form-item>
                    <el-form-item label="扫码打开的小程序版本,正式版为 release，体验版为 trial，开发版为 develop" prop="ScanEnvVersion">
                        <el-radio-group v-model="detailData.ScanEnvVersion">
                            <el-radio value="develop">开发版</el-radio>
                            <el-radio value="trial">体验版</el-radio>
                            <el-radio value="release">正式版</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="登陆时可以自己绑定手机号码,设置为false只能由上级进行修改绑定" prop="LoginBindPhoneOfSelf">
                        <el-switch v-model="detailData.LoginBindPhoneOfSelf" />
                    </el-form-item>

                    <el-form-item label="长期未登录,提醒的角色,需要在角色列表中存在才行,设置为空则关闭" prop="ReminderRole">
                        <el-input v-model="detailData.ReminderRole" />
                    </el-form-item>
                    <el-form-item label="长期未登录,首次开始提醒的间隔天数,单位:天" prop="FirstReminderDay">
                        <el-input v-model="detailData.FirstReminderDay" />
                    </el-form-item>
                    <el-form-item label="长期未登录,重复提醒间隔天数,单位:天" prop="RepeatReminderDay">
                        <el-input v-model="detailData.RepeatReminderDay" />
                    </el-form-item>
                </div>
                <div class="list-w">
                    <el-form-item label="开启账号登陆时密码错误封禁功能" prop="AccountErrBanOpen">
                        <el-switch v-model="detailData.AccountErrBanOpen" />
                    </el-form-item>
                    <el-form-item label="密码错误时 从首次开始到最大次数的时间范围 单位:分钟" prop="AccountErrTimeScope">
                        <el-input v-model="detailData.AccountErrTimeScope" />
                    </el-form-item>

                    <el-form-item label="密码错误在指定时间范围下允许的最大错误次数" prop="AccountErrMaxNumber">
                        <el-input v-model="detailData.AccountErrMaxNumber" />
                    </el-form-item>

                    <el-form-item label="首次封禁时间 单位:分钟" prop="FirstBanTime">
                        <el-input v-model="detailData.FirstBanTime" />
                    </el-form-item>

                    <el-form-item label="二次封禁时间 单位:分钟" prop="SecondBanTime">
                        <el-input v-model="detailData.SecondBanTime" />
                    </el-form-item>

                    <el-form-item label="低频率时间下连续错误最大次数" prop="AccountErrCount">
                        <el-input v-model="detailData.AccountErrCount" />
                    </el-form-item>
                    <el-form-item label="修改密码的时间间隔,达到或超过间隔时间则进行提示,单位:天" prop="UpdatePassInterval">
                        <el-input v-model="detailData.UpdatePassInterval" />
                    </el-form-item>
                </div>
                <div class="list-w">
                    <el-form-item label="图片宽 点选验证码配置" prop="width">
                        <el-input v-model="tapCaptchaConfig.width" />
                    </el-form-item>
                    <el-form-item label="图片高 点选验证码配置" prop="height">
                        <el-input v-model="tapCaptchaConfig.height" />
                    </el-form-item>

                    <el-form-item label="文字数量 点选验证码配置" prop="fontNum">
                        <el-input v-model="tapCaptchaConfig.fontNum" />
                    </el-form-item>

                    <el-form-item label="校验数量 点选验证码配置" prop="checkNum">
                        <el-input v-model="tapCaptchaConfig.checkNum" />
                    </el-form-item>

                    <el-form-item label="源文字集合 点选验证码配置" prop="fontStr">
                        <el-input v-model="tapCaptchaConfig.fontStr" />
                    </el-form-item>

                    <el-form-item label="背景图地址 点选验证码配置" prop="backImgUrl">
                        <el-upload class="avatar-uploader" :headers="{ Token: token }" :action="action"
                            :data="{ type: '1', isCaptchaBGImage: true }" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <el-input v-model="tapCaptchaConfig.backImgUrl" placeholder="点击上传"
                                :suffix-icon="UploadFilled" />
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="偏移量 点选验证码配置" prop="accuracy">
                        <el-input v-model="tapCaptchaConfig.accuracy" />
                    </el-form-item>
                </div>
            </el-form>


        </KoiCard>
    </div>
</template>

<script setup lang="ts" name="functionPage">
import { ref, onMounted } from "vue";
import { koiMsgBox, koiMsgBoxPrompt, koiNoticeError, koiNoticeSuccess } from "@/utils/koi.ts";
import { getConfig, getVersion, updateConfig } from "@/api/system/func";
import { UploadFilled } from "@element-plus/icons-vue";
import useAuthStore from "@/stores/modules/user.ts";

const detailData = ref<any>({});

const handleRefresh = async () => {
    try {

        const res: any = await getConfig()
        res.updateTime = new Date(res.updateTime).toLocaleString();
        detailData.value = res;
        tapCaptchaConfig.value = res.tapCaptchaConfig || {};
        koiNoticeSuccess('获取配置信息成功');

    } catch (error) {
        koiNoticeError("获取配置信息失败，请重试🌻")
    }
}

const gl_vesion = ref()

const versionInfo = async () => {
    try {
        gl_vesion.value = await getVersion()
    } catch (error) {
        koiNoticeError("获取配置信息失败，请重试🌻")
    }
}

const initData = async () => {
    await versionInfo()
    await handleRefresh()
}

const userStore = useAuthStore();

const tapCaptchaConfig = ref<any>({});

const action = ref('/api/fileUpload')
const token = ref(userStore.token)
const handleAvatarSuccess = (res: any, file: any) => {
    tapCaptchaConfig.value.backImgUrl = res[0];
}
const beforeAvatarUpload = (file: any) => {
    if (file.size / 1024 / 1024 > 2) {
        koiNoticeError('上传头像图片大小不能超过 2MB!');
        return false;
    }
    return true;
}

const handleEdit = () => {
    koiMsgBoxPrompt('请输入密码').then((value: any) => {
        const { _id, createTime, updateTime, ...data } = detailData.value;
        data.tapCaptchaConfig = tapCaptchaConfig.value;
        data.password = value.value;
        koiMsgBox("您确认需要配置信息么？").then(() => {
            updateConfig(detailData.value._id, data).then(() => {
                handleRefresh()
                koiNoticeSuccess("配置成功");
            }).catch(() => {
                koiNoticeError("配置失败，请重试");
            });
        })
    })
}

onMounted(() => {
    initData()
});
</script>

<style lang="scss" scoped>
// 穿梭框高度调整
:deep(.el-transfer-panel__body) {
    height: 400px;
}

ul li {
    list-style: none;
    line-height: 40px;
}

.list-w {
    width: 18%;
    flex: 0 0 18%;
}

.clearfix span:first-child {
    display: flex;
    align-items: center;
}

.header {
    display: flex;
    flex-direction: column;
}

.title {
    color: #303133;
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>